<link rel="import" href="/components/polymer/polymer.html">
<link rel="import" href="/components/paper-button/paper-button.html">
<link rel="import" href="/components/paper-input/paper-input.html">
<link rel="import" href="/components/paper-checkbox/paper-checkbox.html">
<link rel="import" href="/components/core-input/core-input.html">
<link rel="import" href="/components/sortable-table/sortable-table.html">
<link rel="import" href="/a/elements/nav_components/nav-panel.html">
<link rel="import" href="/a/elements/utility/ajax-service.html">

<polymer-element name="user-detail" attributes="id mode">
    <!--mode: new show edit-->
    <template>
        <link rel="stylesheet" type="text/css" href="/assets/main.css" shim-shadowdom>
        <nav-panel>
            <span tool>{{title}}</span>
            <div id="single_panel">
                <div vertical layout>
                    <p id="re_text" style="display:none;color:red">msg</p>
                    <template if="{{mode=='show'}}">
                        <paper-input label="ID:" name="id" value="{{user.id}}" floatingLabel required readonly></paper-input>
                    </template>
                    <paper-input label="Email:" name="email" value="{{user.email}}" floatingLabel required readonly="{{mode=='show'}}"></paper-input>
                    <template if="{{mode!='show'}}">
                        <paper-input label="Password:" name="password" value="{{user.password}}" floatingLabel required type="password"></paper-input>
                    </template>
                    <div horizontal layout center><div flex>is admin</div><paper-checkbox checked="{{user.isAdmin}}" disabled="{{mode=='show'}}"></paper-checkbox></div>
                    <paper-input label="Remark:" value="{{user.remark}}" floatingLabel multiline readonly="{{mode=='show'}}"></paper-input>
                    <template if="{{mode=='show'}}">
                        <paper-input label="Created at:" value="{{user.created_at}}" floatingLabel readonly></paper-input>
                    </template>
                    <div horizontal layout center>
                        <template if="{{mode=='new'}}">
                            <paper-button class="multi" on-click="{{newSubmit}}" label="add" raisedButton default></paper-button>
                        </template>
                        <template if="{{mode=='edit'}}">
                            <paper-button class="multi" on-click="{{editSubmit}}" label="save" raisedButton default></paper-button>
                        </template>
                        <paper-button class="{{mode=='show'?'multi':'single'}}" onclick="history.go(-1)" label="back" raisedButton></paper-button>
                    </div>
                </div>
            </div>
            <ajax-service id="new_ajax" url="/admin/users" params="{{user}}" handleAs="json" method="post" on-core-response="{{newResponse}}"></ajax-service>
            <ajax-service id="edit_ajax" url="/admin/users/{{id}}" params="{{user}}" handleAs="json" method="put" on-core-response="{{editResponse}}"></ajax-service>
            <ajax-service id="show_ajax" url="/admin/users/{{id}}" handleAs="json" method="get" on-core-response="{{showResponse}}"></ajax-service>
        </nav-panel>
    </template>
    <script>
        Polymer('user-detail', {
            created: function() {
                this.user = {};
            },
            title:'',
            ready: function(){
                if(this.mode=='new'){
                    this.title = 'Add new user';
                }
                if(this.mode=='edit'){
                    this.title = 'Edit a user';
                }
                if(this.mode=='show'){
                    this.title = 'User details';
                }
                document.title = this.title;
                if(this.mode=='edit'||this.mode=='show'){
                    this.$.show_ajax.go();
                }
            },

            showResponse:function(){
                this.user = this.$.show_ajax.response.user;
            },

            newSubmit: function (){
                if(this.user.email.length>0&&this.user.password.length>0){
                    this.$.new_ajax.go();
                }
            },
            newResponse:function(){
                var re = this.$.new_ajax.response;
                if(re["status"]){
                    alert(re["msg"])
                    this.user = {};
                }else{
                    this.$.re_text.style.display = "block";
                    this.$.re_text.innerHTML = re["msg"];
                }
            },
            editSubmit: function (){
                if(this.user.email.length>0&&this.user.password.length>0){
                    this.$.edit_ajax.go();
                }
            },
            editResponse:function(){
                var re = this.$.edit_ajax.response;
                if(re["status"]){
                    this.$.re_text.style.display = "none";
                    alert(re["msg"])
                }else{
                    this.$.re_text.style.display = "block";
                    this.$.re_text.innerHTML = re["msg"];
                }
            }
        });
    </script>
</polymer-element>